<%
# Copyright (C) 2011 - present Instructure, Inc.
#
# This file is part of Canvas.
#
# Canvas is free software: you can redistribute it and/or modify it under
# the terms of the GNU Affero General Public License as published by the Free
# Software Foundation, version 3 of the License.
#
# Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
# A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
# details.
#
# You should have received a copy of the GNU Affero General Public License along
# with this program. If not, see <http://www.gnu.org/licenses/>.
%>

<% question_bank_id ||= "" %>

<form id="question_form_template" class="question_form" style="display: none;">
<div class="question">
  <div class="header" style="background-color: transparent;">
    <input type="text" style="width: 120px;" name="question_name" aria-label="<%= t "label.question.name", "Question name" %>"/>
    <input type="hidden" name="regrade_disabled" value="" />
    <select class="question_type" name="question_type" aria-label="<%= t "label.question.type", "Question type" %>">
      <option value="multiple_choice_question">{{#t}}Multiple Choice{{/t}}</option>
      <option value="true_false_question">{{#t}}True/False{{/t}}</option>
      <option value="short_answer_question">{{#t}}Fill In the Blank{{/t}}</option>
      <option value="fill_in_multiple_blanks_question">{{#t}}Fill In Multiple Blanks{{/t}}</option>
      <option value="multiple_answers_question">{{#t}}Multiple Answers{{/t}}</option>
      <option value="multiple_dropdowns_question">{{#t}}Multiple Dropdowns{{/t}}</option>
      <option value="matching_question">{{#t}}Matching{{/t}}</option>
      <option value="numerical_question">{{#t}}Numerical Answer{{/t}}</option>
      <option value="calculated_question">{{#t}}Formula Question{{/t}}</option>
      <option value="missing_word_question" class="missing_word">{{#t}}Missing Word{{/t}}</option>
      <option value="essay_question">{{#t}}Essay Question{{/t}}</option>
      <option value="file_upload_question">{{#t}}File Upload Question{{/t}}</option>
      <option value="text_only_question">{{#t}}Text (no question){{/t}}</option>
    </select>
    <span class="question_points_holder">
      <span style="padding-left: 20px;"><%= before_label :points, 'pts' %></span>
      <input class="float_value" type="text" style="width: 25px; min-width: 0;" name="question_points" aria-label="<%= t "label.question.points", "Question point value" %>"/>
    </span>
  </div>
  <div class="links">
  </div>
  <div class="clear"></div>
  <div class="text">
    <%# explanations for ungraded quizzes - basically the same sans references to "correct" answers %>
    <div tabindex="0" class="multiple_choice_question_survey_quiz_explanation explanation subheader">
      {{#t}}Enter your question and multiple answers.{{/t}}
    </div>
    <div tabindex="0" class="true_false_question_survey_quiz_explanation explanation subheader">
      {{#t}}Enter your question text.{{/t}}
    </div>
    <div tabindex="0" class="short_answer_question_survey_quiz_explanation explanation subheader">
      {{#t}}Enter your question text.  \nStudents will see the question followed by a small text box to type their answer.{{/t}}
    </div>
    <div tabindex="0" class="fill_in_multiple_blanks_question_survey_quiz_explanation explanation subheader">
      {{#t}}Enter your question, specifying where each blank should go. Students must type answers into text boxes at each blank.{{/t}}
    </div>
    <div tabindex="0" class="multiple_answers_question_survey_quiz_explanation explanation subheader">
      {{#t}}This question will show a checkbox next to each answer.{{/t}}
    </div>
    <div tabindex="0" class="multiple_dropdowns_question_survey_quiz_explanation explanation subheader">
      {{#t}}Enter your question, specifying where each dropdown should go.  Then define possible answers for each dropdown.{{/t}}
    </div>
    <div tabindex="0" class="missing_word_question_survey_quiz_explanation explanation subheader">
      {{#t}}Define text to go before and after the dropdown and build a set of possible answers.{{/t}}
    </div>

    <div tabindex="0" class="multiple_choice_question_explanation explanation subheader">
      {{#t}}Enter your question and multiple answers, then select the one correct answer.{{/t}}
    </div>
    <div tabindex="0" class="true_false_question_explanation explanation subheader">
      {{#t}}Enter your question text, then select if True or False is the correct answer.{{/t}}
    </div>
    <div tabindex="0" class="short_answer_question_explanation explanation subheader">
      <%= mt('explanations.short_answer', "Enter your question text, then define all possible correct answers for the blank.  \nStudents will see the question followed by a small text box to type their answer.") %>
    </div>
    <div tabindex="0" class="fill_in_multiple_blanks_question_explanation explanation subheader">
      {{#t}}Enter your question, specifying where each blank should go.  Then define the possible correct answer for each blank.  Students must type correct answers into text boxes at each blank.{{/t}}
    </div>
    <div tabindex="0" class="multiple_answers_question_explanation explanation subheader">
      {{#t}}This question will show a checkbox next to each answer, and the student must select ALL the answers you mark as correct.{{/t}}
    </div>
    <div tabindex="0" class="multiple_dropdowns_question_explanation explanation subheader">
      {{#t}}Enter your question, specifying where each dropdown should go.  Then define possible answers for each dropdown, with one correct answer per dropdown.{{/t}}
    </div>
    <div tabindex="0" class="matching_question_explanation explanation subheader">
      {{#t}}Build pairs of matching values.  Students will see values on the left and have to select the matching value on the right from a dropdown.  Multiple rows can have the same answer, and you can add additional distractors to the right side.{{/t}}
    </div>
    <div tabindex="0" class="numerical_question_explanation explanation subheader">
      {{#t}}Define the correct answer as any number within a range, or a number plus or minus some error margin.  Student will be given an empty text box to type their numerical answer.{{/t}}
    </div>
    <div tabindex="0" class="calculated_question_explanation explanation subheader">
      {{#t}}Enter your question, build a formula, and generate a set of possible answer combinations.  Students will see the question with a randomly selected set of variables filled in and have to type the correct numerical answer.{{/t}}
    </div>
    <div tabindex="0" class="missing_word_question_explanation explanation subheader">
      {{#t}}Define text to go before and after the dropdown.  Build a set of possible answers and select one correct answer.{{/t}}
    </div>
    <div tabindex="0" class="essay_question_explanation explanation subheader">
      {{#t}}Students will be given a text field to compose their answer.{{/t}}
    </div>
    <div tabindex="0" class="file_upload_question_explanation explanation subheader">
      {{#t}}Students will be able to upload a file for their answer.{{/t}}
    </div>
    <div tabindex="0" class="text_only_question_explanation explanation subheader">
      {{#t}}This "question" will not be scored, but can be useful for introducing a set of related questions.{{/t}}
    </div>
    <b class="question_header"><%= before_label(:question, "Question") %></b>
    <div tabindex="0" class="equation_header">
      <div class="equation_subheader">
        {{#t}}You can define variables by typing variable names surrounded by brackets{{/t}}<br/>
        ({{#t}}i.e. "What is 5 plus [x]?"{{/t}})
        <a href="#" class="help_with_equations_link">{{#t}}Need help?{{/t}}</a>
      </div>
    </div>
    <div tabindex="0" class="multi_answer_sets multi_answer_sets_subheader">
      {{#t}}In the box below, every place you want to show an answer box, type a reference word (no spaces) surrounded by brackets{{/t}}<br/>
      ({{#t}}i.e. "Roses are [color1], violets are [color2]"{{/t}})
    </div>
    <div style="float: right; margin-right: 10%; font-size: 0.8em;">
      <a href="#" class="toggle_question_content_views_link"><%= t '#editor.switch_editor_html', "HTML Editor" %></a>
      <a href="#" class="toggle_question_content_views_link" style="display:none;"><%= t '#editor.switch_editor_rich_text', "Rich Content Editor" %></a>
    </div>
    <div class="clear"></div>
    <div style="text-align: center;">
      <textarea style="width: 90%; height: 120px;" class="question_content" name="question_text"></textarea>
    </div>
    <b tabindex="0" role="heading" class="answers_header"><%= before_label(:answers, "Answers") %></b>
    <div style="display: none;">
    <select class="answer_selection_type" name="answer_selection_type">
      <option value="single_answer">{{#t}}Only One Correct Answer{{/t}}</option>
      <option value="multiple_answer">{{#t}}Students Select Multiple Answers{{/t}}</option>
    </select>
    </div>
    <div class="multi_answer_sets">
      <%= t(:show_possible_answers, "Show Possible Answers for %{question}", :question => raw("<select class='blank_id_select' aria-label='#{ t(:show_possible_answers_no_question, "Show Possible Answers for")}'></select>")) %>
    </div>
    <div class="equation_answers">
      <div class="clear"></div>
      <div class="equation_header variables_specified">
        {{#t}}Variable Definitions{{/t}}
        <div class="equation_subheader">
          {{#t}}Once you have entered your variables above, you should see them listed here.  You can specify the range of possible values for each variable below.{{/t}}
        </div>
      </div>
      <div class="equation_content variables_specified">
        <table class="variables">
          <thead>
            <tr>
              <th id='equation_var_name'>{{#t}}Variable{{/t}}</th>
              <th id='equation_var_minimum'>{{#t}}Min{{/t}}</th>
              <th id='equation_var_maximum'>{{#t}}Max{{/t}}</th>
              <th id='equation_var_precision'>{{#t}}Decimal Places{{/t}}</th>
              <th>
                {{#t}}Example Value{{/t}}
                <div><button type="button" class="btn btn-small recompute_variables">{{#t}}Recompute{{/t}}</button></div>
              </th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
      <div class="equation_header variables_specified">
        {{#t}}Formula Definition{{/t}}
        <div class="equation_subheader">
          {{#t}}Next you'll need to write the formula or formulas used to compute the correct answer.  Just use the same variable names listed above.{{/t}}
        </div>
      </div>
      <div class="equation_content variables_specified">
        <input type="text" class="supercalc" style="width: 300px;"/>
      </div>
      <div class="equation_header variables_specified formulas_specified">
        {{#t}}Generate Possible Solutions{{/t}}
        <div class="equation_subheader">
          {{#t}}Finally, build as many variable-solution combinations as you need for your quiz.{{/t}}
        </div>
      </div>
      <div class="equation_content variables_specified formulas_specified">
        <label class="screenreader-only" for="combinations_input">{{#t}}Possible combination count{{/t}}</label>
        <%= t(:offer_combinations, "Offer %{how_many} possible value combinations (max %{max_combinations})", :how_many => raw('<input id="combinations_input" type="text" class="combination_count combinations_option" style="width: 30px;"/>'), :max_combinations => @js_env[:quiz_max_combination_count]) %><br/>
        <label class="screenreader-only" for="tolerance_input">{{#t}}Tolerance value{{/t}}</label>
        <%= t(:allow_tolerance, "allow an error margin of +/- %{tolerance}", :tolerance => raw('<input id="tolerance_input" type="text" placeholder="2.0 or 10%" class="combination_answer_tolerance" style="width: 30px;" value="0"/>')) %>
        <button type="button" class="btn compute_combinations combinations_option">{{#t}}Generate{{/t}}</button>
      </div>
      <div class="formulas_specified combinations_holder">
        <table class="combinations">
          <thead>
            <tr></tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
    </div>
    <div class="form_answers">
    </div>
    <div style="text-align: right;" class="add_answer">
      <a href="#" class="add_answer_link icon-add">{{#t}}Add Another Answer{{/t}}</a>
    </div>
    <div class="matching_answer_incorrect_matches_holder" style="margin-top: 15px;">
      <b id="distractor_label"><%= before_label(:distractors, "Additional Match Possibilities (distractors)") %></b>
      <div id="distractor_instructions" style="font-size: 0.8em;">{{#t}}type each distractor on its own line{{/t}}</div>
      <div style="text-align: center;">
      <textarea style="width: 90%; height: 50px;" aria-labelledby="distractor_label" aria-describedby="distractor_instructions" name="matching_answer_incorrect_matches"></textarea>
      </div>
    </div>
    <div class="missing_word_after_answer" style="margin-top: 15px;">
      <b><%= before_label(:missing_word_after, "Text to go after answers") %></b>
      <div style="float: right; margin-right: 10%; font-size: 0.8em;">
        <a href="#" class="toggle_text_after_answers_link"><%= t '#editor.switch_editor_html', "HTML Editor" %></a>
        <a href="#" class="toggle_text_after_answers_link" style="display:none;"><%= t '#editor.switch_editor_visual', "Rich Content Editor" %></a>
      </div>
      <div style="text-align: center;">
      <textarea style="width: 90%; height: 70px;" name="text_after_answers" class="text_after_answers"></textarea>
      </div>
    </div>

    <div class="question_comment question_correct_comment comment empty">
      <div class="comment_top"></div>
      <% edit_correct_comment_text = t('titles.click_to_enter_correct_answer_comments', "Click to enter comments for a correct answer") %>
      <a href="#" class="comment_focus" title="<%= edit_correct_comment_text %>">
        <span class="ellipsis" aria-hidden="true">...</span>
        <i class="icon-edit standalone-icon"></i>
        
      </a>
      <span id="correct_label" class="details">{{#t}}Correct answer comments{{/t}}</span>
      <input type="hidden" name="correct_comments_html" />
      <div class="correct_comments_html comment_html"></div>
    </div>

    <div class="question_comment question_incorrect_comment comment empty">
      <div class="comment_top"></div>
      <% edit_incorrect_comment_text = t('titles.click_to_enter_wrong_answer_comments', "Click to enter comments for a wrong answer") %>
      <a href="#" class="comment_focus" title="<%= edit_incorrect_comment_text %>">
        <span class="ellipsis" aria-hidden="true">...</span>
        <i class="icon-edit standalone-icon"></i>
        
      </a>
      <span id="wrong_label" class="details">{{#t}}Wrong answer comments{{/t}}</span>
      <input type="hidden" name="incorrect_comments_html" />
      <div class="incorrect_comments_html comment_html"></div>
    </div>

    <div class="question_comment question_neutral_comment comment empty">
      <div class="comment_top"></div>
      <% edit_neutral_comment_text = t('titles.click_to_enter_general_answer_comments', "Click to enter general comments") %>
      <a href="#" class="comment_focus" title="<%= edit_neutral_comment_text %>">
        <span class="ellipsis" aria-hidden="true">...</span>
        <i class="icon-edit standalone-icon"></i>
        
      </a>
      <span id="general_label" class="details">{{#t}}General answer comments{{/t}}</span>
      <input type="hidden" name="neutral_comments_html" />
      <div class="neutral_comments_html comment_html"></div>
    </div>

    <div class="clear"></div>
    <div class="button-container">
      <button type="button" class="btn btn-small cancel_link">{{#t}}Cancel{{/t}}</button>
      <button type="submit" class="btn btn-small submit_button btn-primary">{{#t}}Create/Update Question{{/t}}</button>
    </div>
  </div>
</div>
</form>
